Angular-এ ডাইনামিক ফর্মস তৈরি করা যায়, যেখানে ফর্মের এলিমেন্টগুলো রানটাইমে পরিবর্তন করা হয়। Angular ফর্ম দুটি প্রধানভাবে পরিচালনা করতে পারে: Template-driven forms এবং Reactive forms। ডাইনামিক ফর্ম তৈরির জন্য সাধারণত Reactive Forms ব্যবহার করা হয়, কারণ এটি বেশি কাস্টমাইজেশন এবং কন্ট্রোল সরবরাহ করে। ডাইনামিক ফর্মের মাধ্যমে আপনি কনট্রোল, ভ্যালিডেশন এবং লেআউটকে কোডের মাধ্যমে নিয়ন্ত্রণ করতে পারেন।

Reactive Forms এ ডাইনামিক ফর্ম তৈরি করা

Reactive Forms Angular-এর একটি শক্তিশালী ফিচার, যা ফর্মের ডেটা এবং স্টেট ম্যানেজমেন্ট খুব সহজে করতে সাহায্য করে। ডাইনামিক ফর্ম তৈরির জন্য, আপনি ফর্ম কন্ট্রোল (FormControl) এবং ফর্ম গ্রুপ (FormGroup) ব্যবহার করতে পারেন। এটি আপনাকে ফর্মের ক্ষেত্রগুলো চলতি সময়ে অ্যাড, রিমুভ, অথবা আপডেট করতে সহায়তা করে।

১. ReactiveFormsModule ইনস্টল করা

প্রথমে, আপনাকে ReactiveFormsModule মডিউলটি ইম্পোর্ট করতে হবে app.module.ts ফাইলে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';  // Import ReactiveFormsModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule  // Add ReactiveFormsModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ডাইনামিক ফর্ম তৈরি করার উদাহরণ

ধরা যাক, আমাদের একটি ফর্ম আছে, যেখানে আমরা রিয়েল টাইমে ইনপুট ফিল্ড অ্যাড বা রিমুভ করতে চাই।

২. ফর্ম কন্ট্রোল (FormControl) এবং ফর্ম গ্রুপ (FormGroup) ব্যবহার করা

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index">
          <div [formGroupName]="i">
            <input formControlName="name" placeholder="Item Name" />
            <input formControlName="value" placeholder="Item Value" />
            <button (click)="removeItem(i)">Remove</button>
          </div>
        </div>
      </div>
      <button (click)="addItem()">Add Item</button>
      <button type="submit" [disabled]="dynamicForm.invalid">Submit</button>
    </form>
  `,
})
export class DynamicFormComponent {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      items: this.fb.array([this.createItem()]), // Initial array with one item
    });
  }

  get items() {
    return (this.dynamicForm.get('items') as FormArray);
  }

  createItem(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required],
      value: ['', Validators.required],
    });
  }

  addItem() {
    this.items.push(this.createItem());
  }

  removeItem(index: number) {
    this.items.removeAt(index);
  }

  onSubmit() {
    console.log(this.dynamicForm.value);
  }
}

কোড ব্যাখ্যা

• FormGroup: ফর্মের জন্য একটি গ্রুপ তৈরি করে, যেখানে একাধিক ফর্ম কন্ট্রোল থাকে।
• FormArray: এটি একটি অ্যারে টাইপ ফর্ম কন্ট্রোল, যেখানে একাধিক ফর্ম গ্রুপ রাখা যায়। এটি ডাইনামিক ফর্ম তৈরির জন্য আদর্শ।
• FormBuilder: এটি Angular এর একটি সরঞ্জাম যা ফর্ম তৈরি করার প্রক্রিয়া সহজ করে দেয়। fb.group() এবং fb.array() ব্যবহার করে আমরা ফর্ম গ্রুপ এবং ফর্ম অ্যারে তৈরি করি।
• addItem(): এটি একটি নতুন ফর্ম ইনপুট তৈরি করার জন্য ব্যবহৃত হয় এবং FormArray তে যোগ করে।
• removeItem(i): এটি নির্দিষ্ট ইনডেক্স থেকে একটি ইনপুট ফিল্ড মুছে দেয়।

ফর্ম ভ্যালিডেশন

ডাইনামিক ফর্মে আপনি ফর্ম কন্ট্রোলের উপর ভ্যালিডেশনও অ্যাপ্লাই করতে পারেন। উপরের উদাহরণে, name এবং value ফিল্ডে Validators.required ব্যবহার করা হয়েছে, যাতে ফিল্ডগুলো ফাঁকা না থাকে।

৩. কাস্টম ভ্যালিডেশন

আপনি কাস্টম ভ্যালিডেটরও তৈরি করতে পারেন যা ফর্ম কন্ট্রোলের ভ্যালিডেশন চেক করবে। উদাহরণস্বরূপ:

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function nameValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  if (value && value.length < 3) {
    return { 'nameTooShort': true };
  }
  return null;
}

এই কাস্টম ভ্যালিডেটরটি name ফিল্ডে প্রয়োগ করা যেতে পারে, যাতে সেটি কমপক্ষে ৩ ক্যারেক্টার দীর্ঘ হয়।

সারাংশ

Angular-এ ডাইনামিক ফর্ম তৈরি করা খুবই সহজ এবং শক্তিশালী একটি বৈশিষ্ট্য। এটি Reactive Forms ব্যবহার করে করা যায়, যা আপনাকে ফর্ম কন্ট্রোল, গ্রুপ, এবং অ্যারে নিয়ন্ত্রণ করার সুবিধা দেয়। Angular CLI এবং ReactiveFormsModule ব্যবহারের মাধ্যমে ডাইনামিক ফর্ম তৈরি করতে পারেন, যেখানে আপনি ফর্মের ইনপুট ফিল্ডগুলো যোগ, মুছে, অথবা আপডেট করতে পারবেন।